<!--
 * @Date: 2024-09-04 16:09:58
 * @Author: Yu Weifeng weifeng.yu@gientech.com
 * @Description: 
-->
<template>
  <el-menu
    ref="menu"
    class="lc-menu"
    :default-active="defaultActive"
    :mode="mode"
    :router="router"
    :menu-trigger="menuTrigger"
    :background-color="backgroundColor"
    :text-color="textColor"
    :active-text-color="activeTextColor"
    :ellipsis="false"
  >
    <MenuItem
      v-for="item in menuList"
      :key="item[fieldsMap.id]"
      :index="item[fieldsMap.path]"
      :menu-data="item"
      :fields-map="fieldsMap"
    />
  </el-menu>
</template>
<script setup>
import MenuItem from './components/menu-item';
defineProps({
  mode: {
    default: 'horizontal',
    type: String
  },
  backgroundColor: {
    default: '',
    type: String
  },
  textColor: {
    default: '',
    type: String
  },
  activeTextColor: {
    default: '',
    type: String
  },
  router: {
    default: false,
    type: Boolean
  },
  menuList: {
    default: () => [],
    type: Array
  },
  menuTrigger: {
    default: 'hover',
    type: String
  },
  fieldsMap: {
    default: () => ({
      id: 'id',
      children: 'children',
      path: 'path',
      label: 'label',
      icon: 'icon'
    }),
    type: Object
  },
  defaultActive: {
    default: '',
    type: String
  }
});
</script>
